<template>
	<article style="text-align: center;">
		<el-dialog :title="params.row.zwm + '的班级'" :visible.sync="dialogTableVisible" @close="cancel">
			<!-- 数据表格展示区域 -->
	        <el-table
	            :data="dataList"
	            border
	            align="center"
	            class="admin-table">
	            <div slot='empty'>
	                <img src="../../../assets/img/empty.png" style="width:40px;vertical-align: middle;">
	                <span style="vertical-align: middle;">暂时还没有内容哦!</span>
	            </div>


	            <el-table-column
	                :prop="v.prop"
	                :label="v.label"
	                v-for="(v,index) in portTitleList"
	                align="center"
	                show-overflow-tooltip
	                v-if="v.hide != 0"
	                :align="v.align || 'center'"
	                :fixed="v.fixed"
	                :formatter="v.formatter"
	                :class-name="v.columnStyle"
	                :width="v.width"
	                :min-width="v.minWidth || '150'"
	                :header-align="v.headerAlign || 'center'"
	                >
	                <template scope="scope">
	                    <div slot="reference" v-if="scope.column.property == 'mc'">
	                        <span class="classInfo" @click="componentsShow('info',scope)">{{ scope.row[scope.column.property] }}</span>
	                    </div>
	                    <div slot="reference" v-else-if="scope.column.property == 'sj'" v-html="$.getLocalTime(scope.row[scope.column.property])"></div>
	                    <div slot="reference" v-else>
	                        <span>{{ scope.row[scope.column.property] }}</span>
	                    </div>
	                </template>
	            </el-table-column>
	        </el-table>

	        <!-- 分页查询区域 -->
	        <el-pagination
	            @size-change="handleSizeChange"
	            @current-change="handleCurrentChange"
	            :current-page.sync="pageindex"
	            :page-sizes="pagesizes"
	            :page-size="pagesize"
	            :layout="layout"
	            :total="total"
	            class="class-page">
	        </el-pagination>
		</el-dialog>
	</article>
</template>

<script type="text/javascript">
	export default {
		props: ['params'],
		data () {
			return {
				dialogTableVisible: true,
				dataList: [],
				/*组件区域*/
                portComponents: {
                    singleDelete: {
                        type: 'singleDelete',
                        toggle: false,
                        params: '',
                        data: {
                            index: '',
                            type: 'single',
                            title: '此操作将删除该班级, 是否继续?'
                        }
                    },
                    multipleDelete: {
                        type: 'multipleDelete',
                        toggle: false,
                        params: '',
                        data: {
                            index: '',
                            type: 'multiple',
                            title: '此操作将删除您选中的班级, 是否继续?'
                        }
                    },
                    add: {
                        type: 'add',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                    info: {
                        type: 'info',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                    edit: {
                        type: 'edit',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                    class: {
                        type: 'class',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                     forbidden: {
                        type: ' forbidden',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                    reset: {
                        type: 'reset',
                        toggle: false,
                        params: '',
                        data: {}
                    }
                },

                multipleDelNum:'', //获取批量选择的数据
                dataList: [],  //表格数据

                /*
                    prop :  接口参数名
                    label : 接口中文名
                    hide : 是否隐藏这一列
                    align : 这一列对齐顺序 ： left,right,center
                    headerAlign : 这一列表头对齐方式 ： left,right,center
                    formatter: function (row, column) {}
                */
                portTitleList: [
                    {
                        prop:'id',
                        label:'ID',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center'
                    },
                    {
                        prop:'mc',
                        label:'班级名称',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center'
                    },
                    {
                        prop:'lszwm',
                        label:'老师中文名',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center'
                    },
                    {
                        prop:'xsrs',
                        label:'学生人数',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center'
                    },
                    {
                        prop:'isqy',
                        label:'是否启用',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'',
                        headerAlign:'center'
                    }

                ],

                /*动画加载*/
                isLoading: false,//动画加载
                searchLoading: false,//搜索按钮触发按钮动画

                /*模糊搜索条件*/
                inputbjmc:'' , //  班级名称,


                /*分页属性设置*/
                layout: 'total, sizes, prev, pager, next, jumper',//组件布局
                pageindex: 1,//当前分页页码
                pagesizes: [12, 24, 36, 72],//显示个数的选择器选项
                pagesize: 12,//每页显示条目数
                total: 0,//总条数


                dropDownData:'' //
			}
		},
		created () {
			// console.log(this.params);
			this.search()
		},
		methods: {
			search () {//查询搜索触发事件
                this.searchLoading = true;
                this.axios.get( this.$store.state.api + 'bj/bj',{
                    params:{
                    	empid: this.params.row.id,
                        pageindex: this.pageindex,
                        pagesize: this.pagesize
                    }
                }).then( res => {
                    console.log(res)

                    let data = res.data.data;
                    let list = data.list;
                    this.total = data.totalPage;
                    this.dataList = list;

                    this.searchLoading = false;
                }).catch( res => {
                    console.log(res)
                    this.searchLoading = false;
                })
            },



            handleSizeChange (val) {//每页显示条数触发事件
                this.pagesize = val;
                this.pageindex = 1;
                this.search();
            },

            handleCurrentChange (val) {//分页触发事件
                this.search();
            },
            checkSelect (selection, row) {//点击单选select触发事件
                console.log(selection, row)
                let strID = [];
                selection.forEach(function(v,i){
                    strID.push(v.id)
                })
                this.multipleDelNum = strID.join(",");
            },
            checkall (selection) {//点击全选select触发事件
                // console.log(selection)
                let strID = [];

                selection.forEach(function(v,i){
                    strID.push(v.id)
                })
                // console.log(strID.join(","))
                this.multipleDelNum = strID.join(",");
                // console.log(strID)
            },
            cancel () {
                this.$emit('close',{type:'class',cancel:true})
            }
		}
	}
</script>
